<script>
import TuiInput from "../../components/thorui/tui-input/tui-input.vue";
import xTimePicker from '../../components/x-time-picker/x-time-picker.vue'
import {commonStorage} from "../../utils/common";
import {getWeilai} from "../../apis/user";

export default {
  name: "fortune",
  components: {xTimePicker, TuiInput},
  data() {
    return {
      modalInfo: {
        name: '',
        year: '',
        month: '',
        day: '',
        hours: '',
        minute: '',
        sex: 0,
        sect: 2,
        type: '',
        yunshi_year: '2024',
      },
      list: [
        {
          text: '男',
          value: 0,
          checked: true
        },
        {
          text: '女',
          value: 1,
        },
      ],
      schoolsList: [
        {
          text: '晚子时日柱算明天',
          value: 1,
        },
        {
          text: '晚子时日柱算当天',
          value: 2,
          checked: true

        },
      ],
      showSex: false,
      userInfo: {},
      dataInfo: {},
      isshowSchools: false,
      btnLoading: false,
      showData: false,
      dateList:[],
      curInfo:{
        monthInfo:{},
        dayInfo:{},

      },
      showChoose:false,
    }
  },
  onShow(options) {
    this.getUserInfo()
    console.log(this.userInfo)
    this.modalInfo = {
      ...this.modalInfo,
      ...this.chooseTime(this.userInfo.birthDate),
      type: this.userInfo.dataType,
      name: this.userInfo.nickName,
    }
    console.log(this.modalInfo)
  },
  methods: {
    changeShowChoose(){
      this.showChoose = !this.showChoose
    },
    async getUserInfo() {
      let userInfo =
          commonStorage.getStorageSync("userInfo") &&
          JSON.parse(commonStorage.getStorageSync("userInfo"));
      if (userInfo) {
        this.userInfo = userInfo;
      }
    },
    chooseTime(time) {
      const now = new Date(time);
      const year = now.getFullYear();
      const month = Number(String(now.getMonth() + 1).padStart(2, '0')); // 月份从0开始，需要加1，并补0
      const day = Number(String(now.getDate()).padStart(2, '0')); // 补0
      const hours = Number(String(now.getHours()).padStart(2, '0')); // 补0
      const minute = Number(String(now.getMinutes()).padStart(2, '0'));
      return {
        year,
        month,
        day,
        hours,
        minute,
      }
    },
    showSchools() {
      this.isshowSchools = true
    },
    onSchoolsClose() {
      this.isshowSchools = false
    },
    confirmSchools(e) {
      this.modalInfo.sect = e.options.value
      this.onSchoolsClose()
    },
    showSelect() {
      this.showSex = true
    },
    showTime() {
      this.$refs.xTimePickerRef && this.$refs.xTimePickerRef.show();
    },
    onClose() {
      this.showSex = false
    },
    confirm(e) {
      this.modalInfo.sex = e.options.value
      this.onClose()
    },
    changeDate(e) {
      this.modalInfo = {
        ...this.modalInfo,
        ...e,
        type: e.calendar,
        hours: e.hour

      }
      console.log(this.modalInfo)
    },
    selectTime() {
      this.$refs.fortuneTime && this.$refs.fortuneTime.show();
    },
    fortuneChange(e) {
      // console.log(e)
      this.modalInfo.yunshi_year = e.result
    },
    complete(e){
      console.log(e)
      this.changeShowChoose()
      this.curInfo.monthInfo = this.dataInfo.detail_info.yunshi_month_info[e.result[0].value]
      this.curInfo.dayInfo = this.curInfo.monthInfo.yunshi_day_info[e.result[1].value]
    },
    calculation() {
      const data = {
        ...this.modalInfo,
        api_key: '2DrZWaTp7NuN4prnq9fpMiA1Y',
        type: this.modalInfo.type === 'solar' ? 1 : 0,
        compute_daily:1
      }
      if (!data.name) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return;
      }
      if (!data.year || !data.month || !data.day || !data.hours || !data.minute){
        uni.showToast({
          title: '请选择出生日期',
          icon: 'none'
        })
        return
      }
      this.btnLoading = true


      getWeilai(data).then((res) => {
        console.log(res)
        if (res.data) {
          this.dataInfo = res.data
          this.showData = true

           this.dataInfo.detail_info.yunshi_month_info.forEach((item,index)=>{
             const obj = {
               text: item.month,
               value:index,
               children:[]
             }
             item.yunshi_day_info.forEach((it,idx)=>{
               obj.children.push({
                 text:it.day,
                 value:idx
               })
             })
             this.dateList.push(obj)
          })
          console.log(this.dateList)
          this.curInfo.monthInfo = this.dataInfo.detail_info.yunshi_month_info[0]
          this.curInfo.dayInfo = this.curInfo.monthInfo.yunshi_day_info[0]
          console.log(this.curInfo)
        }
      }).finally(() => {
        this.btnLoading = false
      })

    }
  },
}
</script>

<template>
  <view class="page">
    <view class="container">
      <view class="tit">未来运势</view>
      <template v-if="!showData">


        <view class="small-tit">缘主姓名：</view>
        <tui-input v-model="modalInfo.name" :radius="10"
                   :size="24"
                   borderColor="#DEDEDE"
                   inputBorder padding="20rpx" placeholder="缘主姓名"
                   style="margin: 10rpx 0">
        </tui-input>
        <view class="small-tit">性别：</view>
        <view class="selected" @click="showSelect">{{ modalInfo.sex == 0 ? '男' : '女' }}</view>
        <tui-select :list="list" :show="showSex" btnBackground="#C89F62" checkboxColor="#C89F62"
                    @close="onClose" @confirm="confirm"></tui-select>
        <view class="small-tit">出生日期：</view>
        <view class="selected" @click="showTime">
          {{ modalInfo.type === "solar" ? '阳历' : '阴历' }}
          {{ modalInfo.year }}-{{ modalInfo.month }}-{{ modalInfo.day }} {{ modalInfo.hours }}:{{ modalInfo.minute }}
        </view>
        <view class="small-tit">流派：</view>
        <view class="selected" @click="showSchools">{{
            modalInfo.sect == 2 ? '晚子时日柱算当天' : '晚子时日柱算明天 '
          }}
        </view>
        <tui-select :list="schoolsList" :show="isshowSchools" btnBackground="#C89F62" checkboxColor="#C89F62"
                    @close="onSchoolsClose" @confirm="confirmSchools"></tui-select>

        <xTimePicker ref="xTimePickerRef" :defaultValue="userInfo.birthDate"
                     :time-hide='[true, true, true, true, true,]' :timeLabel='["年", "月", "日", "时", "分",]'
                     @submit="changeDate"/>
        <view class="small-tit">预测未来哪一年：</view>

        <view class="selected" @click="selectTime">{{ modalInfo.yunshi_year }}</view>
        <tui-datetime ref="fortuneTime" :startYear="new Date().getFullYear()" type="0"
                      @confirm="fortuneChange"></tui-datetime>

        <tui-form-button
            :disabled="btnLoading"
            :loading="btnLoading"
            :size="26"
            background="#C89F62"
            btnSize="medium"
            radius="50px"
            style="margin:40rpx auto"
            @click="calculation()"
        >
          立即测算
        </tui-form-button>

      </template>
      <template v-if="showData">
        <view class="tit text-left">基本信息</view>

        <view class="small-tit">缘主姓名：{{ dataInfo.base_info.name }}</view>
        <view class="small-tit">出生公历：{{ dataInfo.base_info.gongli }}</view>
        <view class="small-tit">出生农历：{{ dataInfo.base_info.nongli }}</view>
        <view class="small-tit">八字生辰：
          {{ dataInfo.detail_info.sizhu_info.year.tg }}{{
            dataInfo.detail_info.sizhu_info.year.dz
          }}年（{{ dataInfo.detail_info.sizhu_info.year.ny }}）
          {{ dataInfo.detail_info.sizhu_info.month.tg }}{{
            dataInfo.detail_info.sizhu_info.month.dz
          }}月（{{ dataInfo.detail_info.sizhu_info.month.ny }}）
          {{ dataInfo.detail_info.sizhu_info.day.tg }}{{
            dataInfo.detail_info.sizhu_info.day.dz
          }}日（{{ dataInfo.detail_info.sizhu_info.day.ny }}）
          {{ dataInfo.detail_info.sizhu_info.hour.tg }}{{
            dataInfo.detail_info.sizhu_info.hour.dz
          }}时（{{ dataInfo.detail_info.sizhu_info.hour.ny }}）
        </view>
        <view class="small-tit">星宿信息：{{ dataInfo.base_info.xingxiu }}</view>
        <view class="small-tit">
          年柱纳音：{{ dataInfo.detail_info.sizhu_info.year.ny }}命（司令：{{ dataInfo.base_info.siling }}）
        </view>
        <view class="small-tit">
          命卦信息：{{ dataInfo.base_info.minggua.mingguaName }}卦({{ dataInfo.base_info.minggua.minggua_fangwei }})
        </view>
        <view class="small-tit">生肖星座：{{ dataInfo.base_info.shengxiao }} {{ dataInfo.base_info.xingzuo }}</view>
        <view class="small-tit">五行旺度：{{ dataInfo.base_info.wuxing_wangdu }}</view>
        <!--        <view class="small-tit">五行喜忌：{{dataInfo.base_info.wuxing_xiji}} </view>-->
        <view class="small-tit">起运信息：{{ dataInfo.base_info.qiyun }}</view>
        <view class="small-tit">交运信息：{{ dataInfo.base_info.jiaoyun }}</view>
        <view class="small-tit">天干留意：{{ dataInfo.base_info.tiangan_liuyi }}</view>
        <view class="small-tit">地支留意：{{ dataInfo.base_info.dizhi_liuyi }}</view>
        <view class="small-tit">
          胎元命身：胎息:{{ dataInfo.base_info.taixi }}({{ dataInfo.base_info.taixi_nayin }})
          胎元:{{ dataInfo.base_info.taiyuan }}({{ dataInfo.base_info.taiyuan_nayin }})
          命宫:{{ dataInfo.base_info.minggong }}{{ dataInfo.base_info.minggong_nayin }}
          身宫:{{ dataInfo.base_info.shenggong }}{{ dataInfo.base_info.shengong_nayin }}
        </view>

        <view class="tit text-left">喜用神分析</view>
        <view class="small-tit">
          日主天干为【{{ dataInfo.base_info.xiyongshen.rizhu_tiangan }}】,
          同类为【{{ dataInfo.base_info.xiyongshen.tonglei }}】,
          异类为【{{ dataInfo.base_info.xiyongshen.yilei }}】 {{ dataInfo.base_info.xiyongshen.qiangruo }},
          以【{{ dataInfo.base_info.xiyongshen.xiyongshen }}】为喜用神

        </view>
        <view class="small-tit">
          阴阳参考：{{ dataInfo.base_info.xiyongshen.yinyang }}
        </view>
        <view class="small-tit">
          五行统计：{{ dataInfo.base_info.xiyongshen.jinNumber }}金，{{ dataInfo.base_info.xiyongshen.muNumber }}木，
          {{ dataInfo.base_info.xiyongshen.shuiNumber }}水，{{ dataInfo.base_info.xiyongshen.huoNumber }}火，
          {{ dataInfo.base_info.xiyongshen.tuNumber }}土，自党：{{
            dataInfo.base_info.xiyongshen.zidang
          }}，异党：{{ dataInfo.base_info.xiyongshen.yidang }}
        </view>
        <view class="small-tit">
          五行能量：
          金：{{ dataInfo.base_info.xiyongshen.jin_score }}分，占比{{ dataInfo.base_info.xiyongshen.jin_score_percent }}，
          木：{{ dataInfo.base_info.xiyongshen.mu_score }}分，占比{{ dataInfo.base_info.xiyongshen.mu_score_percent }}，
          水：{{ dataInfo.base_info.xiyongshen.shui_score }}分，占比{{
            dataInfo.base_info.xiyongshen.shui_score_percent
          }}，
          火：{{ dataInfo.base_info.xiyongshen.huo_score }}分，占比{{ dataInfo.base_info.xiyongshen.huo_score_percent }}，
          土：{{ dataInfo.base_info.xiyongshen.tu_score }}分，占比{{ dataInfo.base_info.xiyongshen.tu_score_percent }}，
        </view>

        <view class="tit text-left">{{ dataInfo.detail_info.yunshi_year_info.yunshi_year.year }}年运势</view>
        <view class="tit ">运势年：{{ dataInfo.detail_info.yunshi_year_info.yunshi_year.year }}
          [{{ dataInfo.detail_info.yunshi_year_info.yunshi_year.xun }}年]
          -----年神煞：{{ dataInfo.detail_info.yunshi_year_info.yunshi_year.shensha }}
        </view>
        <view class="small-tit">
          [本年事业运势]：{{ dataInfo.detail_info.yunshi_year_info.yunshi_year.indication.shiye }}
        </view>
        <view class="small-tit">
          [本年学业运势]：{{ dataInfo.detail_info.yunshi_year_info.yunshi_year.indication.xueye }}
        </view>
        <view class="small-tit">
          [本年运势运势]：{{ dataInfo.detail_info.yunshi_year_info.yunshi_year.indication.yunshi }}
        </view>
        <view class="small-tit">
          [本年姻缘运势]：{{ dataInfo.detail_info.yunshi_year_info.yunshi_year.indication.yinyuan }}
        </view>
        <view class="small-tit">
          [本年财运运势]：{{ dataInfo.detail_info.yunshi_year_info.yunshi_year.indication.caiyun }}
        </view>
        <view class="small-tit">
          [本年健康运势]：{{ dataInfo.detail_info.yunshi_year_info.yunshi_year.indication.jiankang }}
        </view>

        <view class="tit text-left" style="display:flex;align-items: center;justify-content: space-between">
          每月运势

          <span style="color: #c09351" @click="changeShowChoose">选择时间：{{ curInfo.monthInfo.month }}{{curInfo.dayInfo.day}}</span>

        </view>

        <view   style="
        position: fixed;
        left: 0;top: 0;
        background: rgba(0,0,0,0.4);
        z-index: 100;
        width: 100%;
        height: 100vh
        " v-if="showChoose">
          <view style="background: #fff;position:absolute;left: 0;bottom: 0;width: 100%;height: 250px;">
            <tui-cascade-selection height="200px" :itemList="dateList" @complete="complete"></tui-cascade-selection>
          </view>
        </view>
        <view >
          <view class="tit ">运势月：{{ curInfo.monthInfo.month }}{{ curInfo.monthInfo.tg }}{{ curInfo.monthInfo.dz }}-----{{ curInfo.monthInfo.ny }}：{{ curInfo.monthInfo.shensha }}</view>
          <view class="small-tit">
            [本月事业运势]：{{ curInfo.monthInfo.indication.shiye }}
          </view>
          <view class="small-tit">
            [本月学业运势]：{{ curInfo.monthInfo.indication.xueye }}
          </view>
          <view class="small-tit">
            [本月运势运势]：{{ curInfo.monthInfo.indication.yunshi }}
          </view>200
          <view class="small-tit">
            [本月姻缘运势]：{{ curInfo.monthInfo.indication.yinyuan }}
          </view>
          <view class="small-tit">
            [本月财运运势]：{{ curInfo.monthInfo.indication.caiyun }}
          </view>
          <view class="small-tit">
            [本月健康运势]：{{ curInfo.monthInfo.indication.jiankang }}
          </view>
       </view>
        <view class="line"></view>
<!--         v-for="(it,idx) in item.yunshi_day_info && item.yunshi_day_info" :key="idx"-->
        <view >
          <view class="tit">运势日：{{ curInfo.monthInfo.month }}{{ curInfo.dayInfo.day }}
            [{{ curInfo.dayInfo.xun }}日]-----{{ curInfo.dayInfo.ny }}：{{ curInfo.dayInfo.shensha }}
          </view>
          <view class="small-tit">
            [本日事业运势]：{{ curInfo.dayInfo.indication.shiye }}
          </view>
          <view class="small-tit">
            [本日学业运势]：{{ curInfo.dayInfo.indication.xueye }}
          </view>
          <view class="small-tit">
            [本日运势运势]：{{ curInfo.dayInfo.indication.yunshi }}
          </view>
          <view class="small-tit">
            [本日姻缘运势]：{{ curInfo.dayInfo.indication.yinyuan }}
          </view>
          <view class="small-tit">
            [本日财运运势]：{{ curInfo.dayInfo.indication.caiyun }}
          </view>
          <view class="small-tit">
            [本日健康运势]：{{ curInfo.dayInfo.indication.jiankang }}
          </view>
          <view class="line"></view>

        </view>



        <tui-form-button
            :disabled="btnLoading"
            :loading="btnLoading"
            :size="26"
            background="#C89F62"
            btnSize="medium"
            radius="50px"
            style="margin:40rpx auto"
            @click="calculation()"
        >
          重新测算
        </tui-form-button>
      </template>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.page, page {
  min-height: 100vh;
  background-color: #f2f3f5;
}

.text-left {
  text-align: left !important;
  background: #f9f8f8;
  padding: 5px;
  border-radius: 5px;
  margin: 10px 0;
}

.container {
  width: 700rpx;
  margin: 50rpx auto;
  padding: 40rpx;
  border-radius: 20rpx;
  background: #ffffff;
  box-shadow: 41rpx 41rpx 82rpx #e6e6e6,
  -41rpx -41rpx 82rpx #ffffff;
  box-sizing: border-box;

  .line {
    height: 1rpx;
    background-color: #E9E9E9;
    margin: 10rpx 0;
  }

  .tit {
    font-size: 30rpx;
    font-weight: 500;
    text-align: center;
  }

  .small-tit {
    font-size: 26rpx;
    font-weight: 500;
  }

  .selected {
    padding: 10rpx;
    border: 1px solid #dedede;
    font-weight: normal;
    border-radius: 5px;
    font-size: 28rpx;
    color: #999;
    margin: 10rpx 0;
  }
}
</style>
